<template>
  <view class="usercenter-container">
    <!-- 用户信息头部 -->
    <view class="user-header" v-if="isLogin">
      <view class="avatar-box">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <text class="nickname">{{ userInfo.nickname }}</text>
        <text class="account">账号：{{ userInfo.account }}</text>
      </view>
      <view class="arrow-right">
        <u-button @click="checkLogin(goToUserProfile)" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">编辑信息</u-button>
      </view>
    </view>
    
    <!-- 关注与粉丝数据展示 -->
    <view class="follow-stats" v-if="isLogin">
      <view class="stats-item" @click="checkLogin(goToFollowing)">
        <text class="stats-count">{{ followCounts.following || 0 }}</text>
        <text class="stats-label">关注</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item" @click="checkLogin(goToFollowers)">
        <text class="stats-count">{{ followCounts.followers || 0 }}</text>
        <text class="stats-label">粉丝</text>
      </view>
    </view>
    
    <!-- 未登录时显示登录按钮 -->
    <view class="login-register" v-else>
      <button class="login-btn" @click="goToLogin">登录/注册</button>
      <text class="login-tip">登录后享受更多功能和服务</text>
    </view>
    
    <!-- 我的游记 -->
    <view class="module-section">
      <view class="module-title">
        <text>我的游记</text>
      </view>
      <view class="module-content">
        <view class="grid-menu">
          <view class="grid-item" @click="checkLogin(goToMyTravel('MY_TRAVEL'))">
            <view class="icon-wrap">
              <text class="iconfont">📝</text>
            </view>
            <text class="grid-text">我的游记</text>
          </view>
          <view class="grid-item" @click="checkLogin(goToMyTravel('MY_COLLECT'))">
            <view class="icon-wrap">
              <text class="iconfont">💰</text>
            </view>
            <text class="grid-text">我的收藏</text>
          </view>
          <view class="grid-item" @click="checkLogin(goToMyTravel('MY_LIKE'))">
            <view class="icon-wrap">
              <text class="iconfont">👍</text>
            </view>
            <text class="grid-text">我的点赞</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 社交关系 -->
    <view class="module-section">
      <view class="module-title">
        <text>社交关系</text>
      </view>
      <view class="module-content">
        <view class="grid-menu">
          <view class="grid-item" @click="checkLogin(goToFollowing)">
            <view class="icon-wrap">
              <text class="iconfont">👥</text>
            </view>
            <text class="grid-text">我的关注</text>
          </view>
          <view class="grid-item" @click="checkLogin(goToFollowers)">
            <view class="icon-wrap">
              <text class="iconfont">🌟</text>
            </view>
            <text class="grid-text">我的粉丝</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 智能行程 -->
    <view class="module-section">
      <view class="module-title">
        <text>智能行程</text>
      </view>
      <view class="module-content">
        <view class="grid-menu">
          <view class="grid-item" @click="checkLogin(goToAITravel)">
            <view class="icon-wrap">
              <text class="iconfont">🤖</text>
            </view>
            <text class="grid-text">AI规划</text>
          </view>
          <view class="grid-item" @click="checkLogin(goToCustomTravel)">
            <view class="icon-wrap">
              <text class="iconfont">✏️</text>
            </view>
            <text class="grid-text">自定义行程</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 系统设置 -->
    <view class="module-section">
      <view class="module-title">
        <text>系统设置</text>
      </view>
      <view class="module-content">
        <view class="grid-menu">
          <view class="grid-item" @click="goToSettings">
            <view class="icon-wrap">
              <text class="iconfont">⚙️</text>
            </view>
            <text class="grid-text">通用设置</text>
          </view>
          <view class="grid-item" @click="clearCache">
            <view class="icon-wrap">
              <text class="iconfont">🧹</text>
            </view>
            <text class="grid-text">清除缓存</text>
          </view>
          <view class="grid-item" @click="goToAbout">
            <view class="icon-wrap">
              <text class="iconfont">ℹ️</text>
            </view>
            <text class="grid-text">关于我们</text>
          </view>
        </view>
      </view>
    </view>
    
    <button class="logout-btn" v-if="isLogin" @click="handleLogout">退出登录</button>
    
    <view class="footer">
      <text>生活旅游助手 v1.0.0</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getFollowCounts } from '@/api/follow';

// 初始化用户 store
const userStore = useUserStore();

// 用户信息从store获取
const userInfo = computed(() => userStore.getUserInfo);
const isLogin = computed(() => userStore.getLoginStatus);

// 关注相关数据
const followCounts = ref({
  followers: 0,
  following: 0
});

// 初始化
onMounted(() => {
  // 检查登录状态
  userStore.checkLoginStatus();
  
  // 尝试获取用户信息（如果已登录）
  if (isLogin.value) {
    userStore.fetchUserInfo().catch(err => {
      console.error('获取用户信息失败:', err);
    });
    
    // 获取关注和粉丝数据
    fetchFollowCounts();
  }
});

// 获取关注和粉丝数量
const fetchFollowCounts = async () => {
  if (!userInfo.value || !userInfo.value.id) return;
  
  try {
    const res = await getFollowCounts(userInfo.value.id);
    console.log(res,'asdadas');
      followCounts.value = res.data;
  } catch (err) {
    console.error('获取关注和粉丝数量失败:', err);
  }
};

// 登录相关
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

const toLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

// 个人信息
const goToUserProfile = () => {
  uni.navigateTo({
    url: '/package-usercenter/pages/userprofile'
  });
};

// 关注相关
const goToFollowing = () => {
  uni.navigateTo({
    url: `/package-usercenter/pages/following?userId=${userInfo.value.id}`
  });
};

const goToFollowers = () => {
  uni.navigateTo({
    url: `/package-usercenter/pages/followers?userId=${userInfo.value.id}`
  });
};

// 游记相关
const goToMyTravel = (type) => {
  uni.navigateTo({
    url: `/package-usercenter/pages/travel/${type}`
  });
};

// 智能行程相关
const goToAITravel = () => {
  uni.navigateTo({
    url: '/package-discovery/pages/AI-travel'
  });
};

const goToCustomTravel = () => {
  uni.navigateTo({
    url: '/package-discovery/pages/Customize-travel'
  });
};

const goToPublicTravel = () => {
  uni.navigateTo({
    url: '/package-discovery/pages/public-travel'
  });
};

// 系统设置相关
const goToSettings = () => {
  uni.navigateTo({
    url: '/package-usercenter/pages/settings'
  });
};

const clearCache = () => {
  uni.showLoading({
    title: '清除中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '缓存已清除',
      icon: 'success'
    });
  }, 1500);
};

const goToAbout = () => {
  uni.navigateTo({
    url: '/package-usercenter/pages/settings?type=about'
  });
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout();
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
      }
    }
  });
};

// 检查登录状态
const checkLogin = (callback) => {
  if (!isLogin.value) {
    uni.showModal({
      title: '提示',
      content: '您尚未登录，是否前往登录?',
      success: (res) => {
        if (res.confirm) {
          toLogin();
        }
      }
    });
  } else {
    callback();
  }
};
</script>

<style>
.usercenter-container {
  padding: 20rpx;
  padding-bottom: 60rpx;
  background-color: #f5f5f5;
}

.user-header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.avatar-box {
  margin-right: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nickname {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.arrow-right {
  color: #ccc;
}

/* 关注与粉丝统计 */
.follow-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60rpx;
  cursor: pointer;
}

.stats-count {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

.stats-divider {
  width: 2rpx;
  height: 50rpx;
  background-color: #eee;
}

.login-register {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.login-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  margin-bottom: 20rpx;
}

.login-tip {
  font-size: 24rpx;
  color: #999;
}

.module-section {
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
}

.module-title {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
  font-weight: bold;
  font-size: 28rpx;
}

.module-content {
  padding: 10rpx 0;
}

.grid-menu {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.grid-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.logout-btn {
  width: 90%;
  margin: 40rpx auto;
  background-color: #ff4d4f;
  color: #fff;
}

.footer {
  text-align: center;
  padding: 30rpx 0 10rpx;
}

.footer text {
  font-size: 24rpx;
  color: #999;
}

.iconfont {
  font-size: 36rpx;
}
</style>